<template>
	<view class="tabbar_wrap env isBFC">
		<u-tabbar :value="active" @change="change" :fixed="true" :placeholder="false" :safeAreaInsetBottom="true"
			:activeColor="primaryColor" zIndex="999999">
			<u-tabbar-item v-for="item in tabbarList" :key="item.text" :text="item.text">
				<template #active-icon>
					<view class="iconWrap">
						<uni-icons custom-prefix="iconfont_tabbar" :type="item.iconPath" size="22"
							:color="primaryColor">
						</uni-icons>
					</view>
				</template>
				<template #inactive-icon>
					<view class="iconWrap">
						<uni-icons custom-prefix="iconfont_tabbar" :type="item.iconPath" size="22"
							color="rgb(125, 126, 128)">
						</uni-icons>
					</view>
				</template>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script setup>
	import { onBeforeMount, ref } from 'vue';
	import { useGetThemColor } from '@/hooks/useGetThemColor';

	const { primaryColor } = useGetThemColor();

	onBeforeMount(() => {
		uni.hideTabBar({
			animation: false,
		});
	});


	const props = defineProps({
		active: {
			type: Number,
			required: true,
		},
	});

	const tabbarList = ref([{
			pagePath: '/pages/home/home',
			iconPath: 'icon-tabbar-home',
			text: '首页',
		},
		{
			pagePath: '/pages/product/product',
			iconPath: 'icon-tabbar-good',
			text: '产品',
		},
		{
			pagePath: '/pages/cart/cart',
			iconPath: 'icon-tabbar-cart',
			text: '购物车',
		},
		{
			pagePath: '/pages/my/my',
			iconPath: 'icon-tabbar-my',
			text: '我的',
		},
	]);

	const change = (index) => {
		uni.switchTab({
			url: tabbarList.value[index].pagePath,
		});
	};
</script>

<style scoped lang="scss">
	.tabbar_wrap {
		height: 56px;
	}

	::v-deep .u-tabbar__content__item-wrapper {
		height: 55px !important;
	}

	.iconWrap {
		height: 25px;
	}

	::v-deep .uni-icons {
		font-weight: 600;
		font-size: 26px !important;
	}

	::v-deep .u-tabbar-item__text {
		font-size: 12px !important;
	}
</style>